<!-- src/components/GlobalLoading.vue -->
<template>
  <div v-if="visible" class="global-loading-mask">
    <el-loading :target="target" :fullscreen="fullscreen" :lock="lock" :text="text" :spinner="spinner"
      :background="background">
      <template #content>
        <div class="loading-content">
          <el-icon>
            <Loading />
          </el-icon>
          <p>{{ text }}</p>
        </div>
      </template>
    </el-loading>
  </div>
</template>

<script>
import { Loading } from '@element-plus/icons-vue';

export default {
  name: 'GlobalLoading',
  components: {
    Loading
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    target: {
      type: [String, Object],
      default: null
    },
    fullscreen: {
      type: Boolean,
      default: true
    },
    lock: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: '加载中...'
    },
    spinner: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: 'rgba(0, 0, 0, 0.7)'
    }
  },
  data() {
    return {
      // 可以在这里添加响应式数据
    }
  },
  computed: {
    // 可以在这里添加计算属性
  },
  methods: {
    // 可以在这里添加方法
  },
  watch: {
    // 可以在这里添加监听器
  },
  created() {
    // 组件创建后执行
  },
  mounted() {
    // 组件挂载后执行
  },
  beforeUnmount() {
    // 组件卸载前执行
  }
}
</script> 
<style lang="scss" scoped> .global-loading-mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2000;
 }

 .loading-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   color: #fff;
 }
</style>